import React, { Component } from 'react';
import { createForm } from 'rc-form';
import Head from 'views/component/head/head';
import { Picker, List, InputItem, DatePicker, Toast } from 'antd-mobile';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import Rate from 'antd/lib/rate';
import 'antd/lib/rate/style/css';
import { i18n } from 'js/core/i18n';

import moment from 'moment';
import api from 'js/api/index';
import './monitoringMatch.scss';

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
class MonitoringMatch extends Component {
  constructor() {
    super();
    this.state = {
      patrolStoreList: [],
      imgs: [],
      captureLoading: true,
    };
  }
  componentDidMount() {
    this.getPatrolStoreList();
    this.getImg();
  }
  getImg = () => {
    api('/Monitoring/MonitoringCapture', {
      ShopId: this.props.modelData.id,
      list: this.props.modelData.list,
    }, 'POST').then((data) => {
      console.log('123123', data)
      if (!data.data) {
        this.setState({ imgs: [], captureLoading: false })
      } else {
        let imgs = []
        if (data.data.ImgPath.length > 0) {
          data.data.ImgPath.forEach((item, i) => {
            imgs.push({
              ImgPath: item,
              DevicePosition: data.data.ImgPosition[i]
            })
          })
        }
        this.setState({ imgs: imgs, captureLoading: false })
      }

    })
  }
  submit = () => {
    let data = this.props.form.getFieldsValue();
    if (!data.title) {
      Toast.fail(i18n.get('请输入完整的信息'), 2)
      return
    }
    data.list = this.state.patrolStoreList;
    data.ShopId = this.props.modelData.id;
    api('/Monitoring/MonitoringMatch', data, 'POST').then((data) => {
      if (data.code === -1) {
        Toast.fail(data.message, 2)
      } else {
        Toast.success(i18n.get('添加成功'), 2);
        // if (this.props.modelData && this.props.modelData.complete) {
        //   this.props.modelData.complete();
        //   FW.emit('back');
        // }
        FW.emit('back');
      }
    })
  }
  rateOnChange = (item, value) => {
    item.start = value;
  }
  getPatrolStoreList = () => {
    api('/SysBase/getPatrolStoreList', { ShopId: this.props.modelData.id }).then((data) => {
      this.setState({ patrolStoreList: data.data })
    })
  }
  render() {
    const { getFieldProps } = this.props.form;
    let { dataType, patrolStoreList, imgs, captureLoading } = this.state;
    return (
      <div id="monitoringMatch">
        {captureLoading === false ? (imgs.length > 0 ? <div className="flex wrap imgs">
          {imgs.map((listItem) => {
            return <div className="img"><img src={listItem.ImgPath} />
              <div className="ml25">{listItem.DevicePosition}</div>
            </div>
          })}
        </div> : <div className="text-center imgsLoading">{i18n.get("暂无实时图片")}</div>) :
          <div className="flex-center imgsLoading">{i18n.get("实时图片获取中")}<div className="loading"></div></div>}
        <div className="add-content device-container mb20">
          <List>
            <InputItem
              {...getFieldProps('title') }
              clear
              placeholder={i18n.get("标题")}
              className="device-border"
            ><SelectTitle classStyle="required">{i18n.get("标题")}</SelectTitle></InputItem>
          </List>
        </div>
        <div className="add-content device-container mb20">
          <List>
            <div className="add-data">
              <div className="add-group">{i18n.get("评价")}</div>
              <div className="add-radio">
                {patrolStoreList.map(item => {
                  return <div className="rateItem flex-vcenter" key={item.PatrolClassId}>{item.PatrolClassName} <Rate allowHalf={false} start={item.start} onChange={(value) => this.rateOnChange(item, value)} /></div>
                })}
              </div>
            </div>
          </List>
        </div>
        <div className="add-content device-container">
          <List>
            <InputItem
              {...getFieldProps('Remark') }
              clear
              placeholder={i18n.get("请填写问题描述")}
              className="device-border"
            ><SelectTitle >{i18n.get("问题描述")}</SelectTitle></InputItem>
          </List>
        </div>
        <div className="add-info mb"><b>*</b>{i18n.get('必填项')}</div>

        <div className="device-btn">
          <button type="button" className="btn btn-primary" onClick={this.submit}>{i18n.get("提交")}</button>
        </div>
      </div>
    );
  }
}

export default createForm()(MonitoringMatch);
